<template>
    <div style="padding: 10px;">
        <el-form
                :model="formData"
                ref="queryForm"
                :inline="true"
                :rules="Rules"
                label-width="auto"
                @submit.native.prevent>
            
            <!--id -->
            
            
            <!--delState -->
            
            <!-- elsename -->
            <el-form-item label="角色"
                          desc="角色"
                          prop="name">
                <el-input
                        v-model.trim="formData.name"
                        placeholder="角色"
                        clearable
                        size="small"
                        style="width:120px;"
                />
            </el-form-item>
            
            
            <div>
                <el-form-item label="权限逗号隔开"
                              desc="权限逗号隔开"
                              prop="permitIds">
                    <!--        <el-input
                                           v-model.trim="formData.permitIds"
                                           placeholder="权限逗号隔开"
                                           clearable
                                           size="small"
                                           style="width:120px;"
                                           />-->
                    <div>
                        <!-- 显示 全部的 菜单 勾选 勾选的id设置 permitIds-->
                        <el-tree
                                :data="treeData"
                                show-checkbox
                                ref="treeDom"
                                node-key="id"
                                :default-expand-all="true"
                                :default-expanded-keys="this.formData.permitIds"
                                :default-checked-keys="this.formData.permitIds"
                                :props="{
                          children: 'children',
                            label: 'name'
                        }">
                        </el-tree>
                    </div>
                
                </el-form-item>
            </div>
            
            <!-- elsepermitIds -->
        
        
        </el-form>
    
    
    </div>


</template>

<script>
  import { getUrlParam } from '@/utils/index';
  import { alertWithPaylod } from '@/utils/alertUtil';
  import * as  api from '@/apis/sysRole.api.js';
  import { default as FormDialog } from '@codegenarate/mydialogplus';
  import { fillData, validatePromise } from '@/utils/index';
  
  
  const Rules = {
    
    'id': [{ required: false, message: '编号', trigger: 'blur' }],
    
    'delState': [{ required: false, message: '软删除', trigger: 'blur' }],
    
    'permitIds': [{ required: false, message: '权限逗号隔开', trigger: 'blur' }],
    
    'name': [{ required: true, message: '角色', trigger: 'blur' }],
    
  };
  
  const dicInner = {
    
    '___sys_role_id': '编号',
    'sys_role_id': 'sys_role_id',
    
    '___sys_role_delState': '软删除',
    'sys_role_delState': 'sys_role_delState',
    
    '___sys_role_permitIds': '权限逗号隔开',
    'sys_role_permitIds': 'sys_role_permitIds',
    
    '___sys_role_name': '角色',
    'sys_role_name': 'sys_role_name',
    
  };
  
  import * as  appFunApi from '@/apis/appFun.api.js';
  
  export default {
    name: 'sysRoleModify',
    data() {
      return {
        api: api,
        Rules,
        dicInner,
        formData: {
          
          'id': '',
          
          'delState': '',
          
          'permitIds': '',
          
          'name': '',
          
        },
        lists: [],
        selectRows: [],
        classId: '',
        classIdPath: '',
        className: '',
        loading: false,
        isFold: false,
        tableRowClassName({ row, rowIndex }) {
          if (row.rowType == 'total') {
            return 'total-row';
          }
          return '';
        },
        treeData: {},
      };
    },
    components: {
      svgIcon: () => import('@codegenarate/svg-icon'),
      dicSelect: () => import('@/components/DicSelect/index.vue'),
      dicTag: () => import('@/components/dicTag.vue'),
    },
    computed: {},
    watch: {},
    methods: {
      /**
       *  @params _data.
       * @desc 初始化
       */
      async initByDialog(_data) {
        //兼容数据
        _data.permitIds = _data && _data.permitIds && _data.permitIds.split(',');
        
        
        fillData(this.formData, _data);
        console.log('初始化数据', this.formData);
        
        await this.getAllTreeData();
      },
      async getAllTreeData() {
        var treeResult = await appFunApi.getlistAll();
        var treeData = treeResult && treeResult.data || [];
        this.treeData = treeData;
      },
      
      async submitByDialog(_data) {
        var self = this;
        var isyes = await validatePromise.call(this, 'queryForm');
        if (!isyes) {
          return { success: false, message: '请检查必填项' };
        }
        var permitIds = this.$refs['treeDom'].getCheckedKeys();
        this.formData.permitIds = permitIds && permitIds.join(',');
        debugger
        var func = this.formData.id ? api.update : api.add;
        var result = await func(this.formData);
        alertWithPaylod(result);
        return result;
        
      },
      
    },
  };
</script>
